<mat-card *ngIf="initUiModel" class="h-100 preview-card d-flex flex-column">
  <mat-card-header>
    <span class="flex-fill align-self-center">{{title}}</span>
    <button mat-icon-button *ngIf="codeSize" (click)="toggleLayout()"
      [matTooltip]="(isHorizontal ? 'Vertical' : 'Horizontal') + ' layout'">
      <mat-icon>{{isHorizontal ? 'vertical_split' : 'horizontal_split'}}</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Source code" (click)="toggleSourceCode()">
      <mat-icon>code</mat-icon>
    </button>
  </mat-card-header>
  <mat-card-content class="h-100">
    <as-split [useTransition]="true" [direction]="direction" unit="percent" [gutterSize]="codeSize ? 11 : 0">
      <as-split-area #area0="asSplitArea" class="d-flex" [size]="codeSize">
        <mat-tab-group class="w-100 ui-model-tab">
          <mat-tab label="UI Model">
            <mat-tab-group class="w-100 h-100" headerPosition="below">
              <mat-tab label="XML">
                <div #uiModelEl class="h-100"></div>
              </mat-tab>
              <mat-tab label="JSON">
                <div #uiModelJSONEl class="h-100"></div>
              </mat-tab>
            </mat-tab-group>
          </mat-tab>
          <mat-tab label="Scripts">
            <div #scriptsEl class="h-100"></div>
          </mat-tab>
          <mat-tab label="Data Model">
            <div #dataModelEl class="h-100"></div>
          </mat-tab>
        </mat-tab-group>
      </as-split-area>
      <as-split-area [size]="100 - codeSize" #area1="asSplitArea">
        <div class="preview">
          <ngx-dynamic-component class="d-block" *ngIf="uiModel" #dynamicComponent
            [xmlUIModel]='uiModel'
            [dataModel]='dataModel'
            (render)='onRendered($event)'
            (changedDataModel)="onDataModelChange($event)"
            (eventHandlers)="eventHandlers($event)"></ngx-dynamic-component>
        </div>
      </as-split-area>
    </as-split>
  </mat-card-content>
</mat-card>
